<template>
    <sqb-pay @navigateTo="navigateTo" return_url="/pages/mine/payResult" :total_amount="payParams.total_amount"
        :terminal_sn="payParams.terminal_sn" :client_sn="payParams.client_sn" :subject="payParams.subject"
        :sign="payParams.sign" :notify_url="payParams.notify_url" :extended="payParams.extended">
        <view class="box">
            <view class="m">
                <view class="state b">待支付</view>
                <view class="name b"><text>换电站名称：</text>{{ orderData.stationName }}</view>
                <view class="name b" style="font-weight: 400;"><text>车牌号：</text>{{ orderData.vehicleNo }}</view>
                <view class="price b"><text>订单金额：</text>¥{{ Number(orderData.price).toFixed(2) }}</view>
                <view class="no b"><text>订单编号：</text>{{ orderData.orderNo }}</view>
                <view class="time b"><text>订单时间：</text>{{ orderData.orderTime }}</view>
                <button class="search btn">去支付</button>
            </view>
        </view>
    </sqb-pay>
    <!-- merchant_name="云鹰换电" -->
    <!-- <sqb-pay @navigateTo="navigateTo" return_url="/pages/mine/payResult" total_amount="10"
        terminal_sn="100092930047255901" client_sn="202506281457261279" subject="换电支付"
        sign="8AAE40C83C01445A436E6D14844855E6"
        notify_url="https://fujiangjia.hihink.com/prod-api/app/order/notification">
        <button class="search btn">去支付</button>
    </sqb-pay> -->
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { nextTick, ref } from 'vue'
import { getSqbSign, qianbaSign, generateQianbaSign } from './sign';

const payParams = ref({
    client_sn: '',
    notify_url: '',
    sign: '',
    subject: '',
    terminal_sn: '',
    total_amount: '',
  extended: null
})
const orderData = ref({})
const setParams = (option) => {
    orderData.value = JSON.parse(option.item)
    const { client_sn, notify_url, sign, subject, terminal_sn, total_amount, extended } = JSON.parse(option.data)
    // let p = {
    //     client_sn, notify_url, subject, terminal_sn, total_amount, sign
    // }
    // let s = qianbaSign(p, key)
    // let s = getSqbSign(JSON.parse(option.data), ' sign')
    // let s = generateQianbaSign(JSON.parse(option.data), '720a6bfef283ee9820a7b8f96cb72987')
    payParams.value = {
        client_sn,
        notify_url,
        sign: sign,
        subject,
        terminal_sn,
        total_amount,
      extended,
    }
    console.log(payParams.value, 'payParams.value')
}

const navigateTo = (e) => {
    console.log(e, 'eeeeewwqeq')
    uni.redirectTo({
        url: e.detail.url,
        fail(e) {
            uni.showToast({
                title: "支付失败"
            });
        },
    });
}

onLoad((option) => {
    nextTick(() => {
        setParams(option)
    })
})
</script>

<style lang="scss" scoped>
.box {
    height: 100vh;
    padding: 15rpx;

    .m {
        background-color: #fff;
        border-radius: 35rpx;
        padding: 50rpx;
        box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    }

    .state {
        color: #e75e57;
        font-weight: 700;
        font-size: 42rpx;
        text-align: center;
    }

    .name {
        font-weight: 500;
        font-size: 38rpx;
    }

    .price {
        font-size: 38rpx;
        color: #e75e57;
        font-weight: 700;

    }

    .no {
        font-size: 38rpx;
    }

    .time {
        color: gray;
        font-size: 38rpx;

    }

    text {
        color: #111 !important;
        font-weight: normal !important;
    }

    .b:first-child {
        margin-top: 0;
    }

    .b {
        margin: 40rpx 0;
    }
}

.box {}

.btn {
    width: 50%;
    font-size: 26rpx;
    border-radius: 7rpx;
}

.search {
    background-color: #55946d;
    color: #fff;
    font-size: 35rpx;
}
</style>

<style>
page {
    background-color: #f5f5f5;

}
</style>
